<template>
     <div class="carousel">
         <div class="banner">
            <div class="banner-pic">
                <el-carousel  height="500px" width="80vw" autoplay loop indicator-position="none">
                    <el-carousel-item v-for="item in banner" :key="item.id">
                        <img class="carousel-img" :src="item.imgUrl" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <slot></slot>
         </div>
    </div> 
</template>

<script>

export default {
    data(){
        return {
            banner:[],
        }
    },
    async created(){
        const banner=await this.user.banner();
        this.banner=banner.data.result;
        console.log(this.banner);
    }
}
</script>

<style>
    /* .carousel{width:100vw; background:#F5F5F5; margin-top:20px;} */
    .carousel-img{width:100%; height:100%;}
     .banner{ width:80vw; margin:0 auto; position:relative;} 
</style>
